const { resolve } = require('path');   //内置模块直接引入
// 书写 webpack 配置文件的时候
// 涉及到 5 个核心点：1. entry 2. output
// 3. module 进行loader 的配置（处理非 js 的文件）
// 4. plugins 插件（帮助我们完成一些自动化的工作）
// 5. mode 打包的模式（production、development）

// html打包  需要npm  i html-webpack-plugin 命令 安装
const htmlWebpackPlugin = require('html-webpack-plugin');
// 清除上一次的打包  需要npm i clean-webpack-plugin  命令安装
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。
// 此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，
// webpack 将会在打包输出中自动重写文件路径为正确的 URL。

// url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，
// 这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

// 数组里面的 loader 顺序是有关系的,loader让webpack能够去处理那些非JavaScript文件(webpack自身只能理解JavaScript).
// webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径，它被称为公共路径(publicPath)。
//url 相对于 HTML 页面
// 出口  publicPath: output选项指定webpack输出的位置
// output.path只是指示输出的目录，对应一个绝对路径
module.exports = {
    // 入口
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        publicPath: './',
        path: resolve(__dirname, 'dist')
    },
    module: {
        // 设置 loader
        rules: [{
            test: /\.css$/,
            // 数组里面的 loader 顺序是有关系的
            // 执行顺序是从后往前
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(jpg|png|gif|jpeg)$/,
            loader: 'url-loader',
            // 关闭 url-loader 中es6模块话的解析，采用 commonjs 的规范来解析
            options: {
                // 如果图片的大小小于 8kb，就会被 base64 处理
                limit: 8 * 1024,
                esModule: false,
                name: '[hash:10].[ext]',
                outputPath: 'imgs'
            }

        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            // 打包其他资源的统一 loader（css/less、html、图片）
            // 除开上面的资源以外的资源，都用 file-loader 来处理
            exclude: /\.(css|less|js|html|png|jpg|gif|json)$/,
            loader: 'file-loader',
            options: {
                name: '[hash:10].[ext]',
                outputPath: 'font'
            }
        }]
    },
    // 插件：负责一些自动化的工作
    // 值对应的是一个数组，这个数组就书写要使用的插件
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin() // 清除上一次的打包
    ],
    mode: "development",

    // 备注：安装devServer npm 命令为： npm i webpack-dev-server -D
    devServer:{
        contentBase:resolve(__dirname+"dist"),
        // 是否压缩
        compress:true,
        port:3000,
        open:true

    }
}